<template>
  <div class="yearCard">
    <div class="yearHead">
      <x-header title="保养年卡" :left-options="{backText:''}" @click.native='goBack' class='whiteHeader'>
        <img src="../../assets/image/homepage/wx.png" slot='right' class="wx" @click.stop='share'>
      </x-header>
    </div>
    <div class="allCard" v-if='len>0'>
      <div class="cardItem" :class='{active1:item.CARDNAME.indexOf("799")>-1||item.CARDNAME.indexOf("11")>-1,active2:item.CARDNAME.indexOf("599")>-1,active3:item.CARDNAME.indexOf("399")>-1}' v-for='item in cardMess.USERCARD'>
        <div class="cardHead">
          <h1>{{item.CARNUMBER}}<span>保养年卡</span></h1>
          <p>到期：{{item.ENDTIME | filterTimes}}</p>
        </div>
        <div class="cardmain">
          <div class="carMess">
            <img :src="cardMess.CAR_BRAND_URL+item.LOGO" alt="" />
            <div class="messDetail">
              <h2>{{item.CARBRAND.split('_')[0]}} {{item.CARBRAND.split('_')[1]}}</h2>
              <p>{{item.CARBRAND.split('_')[2]}}</p>
            </div>
          </div>
          <div class="maintainNum">
            <label>剩余保养数</label><span>{{item.MAINTENANCETIMES}}</span>
          </div>
        </div>
        <div class="cardFooter">
          <div class="upMaintain" v-if='item.LASTDATE>0'>上次保养：{{item.LASTDATE | filterTimes}}</div>
          <div v-if='item.LASTDATE==0'></div>
          <div class="goMaintain btns" v-if='item.MAINTENANCETIMES>0' @click='goMaintain(item)'>去保养</div>
        </div>
      </div>
      <div class="buyBtn" @click='goCard' v-if='len>0'>
        <img src="../../assets/image/homepage/cards.png" alt="" />预约保养年卡
      </div>
    </div>
    <div class="share" v-if='showShare'>
      <img src="../../assets/image/sharelog.png" alt="" />
      <div class="shareBtn" @click='iKonw'>知道了</div>
    </div>
    <div class="mask" v-if='showShare'>
    </div>
  </div>
</template>
<script>
/*智能保养*/
import {XHeader} from 'vux';
import { setCookie, getCookie,appid,reloads,pushStateUrl,iosAdroidWx} from '../../util/commonUtils';
import wx from 'weixin-js-sdk'//微信jssdk
export default {
  name:"yearCard",
  // 数据
  data(){

    return{
    	userId:'',
      cardMess:'',
      len:1, //年卡数
      showShare:false 
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    if(sessionStorage.getItem('reload')){
      sessionStorage.removeItem('reload');
      this.getConfig();//获取微信的配置信息
    }else{
      sessionStorage.setItem('reload',1);
      pushStateUrl();
      reloads();
      return;
    }
    if(this.userId){
      this.getCardList();
    }else{
      location.href='http://carnt.carnettong.com:8088/CARNT/jsp/card/card_Verification.jsp';
    }
    
  },
  // el被创建，并挂载到实例上
  mounted(){
  },
  // 方法（实例中的方法）-----------
  methods:{
    share(){
      this.showShare=true;
    },
    iKonw(){
      this.showShare=false;
    },
    goCard(){
      let phone=getCookie('userName');
      location.href='http://carnt.carnettong.com:8088/CARNT/jsp/card/card_Binding.jsp?card_phone='+phone;
    },
    //年卡列表
    getCardList(){
      let phone=getCookie('userName');
      this.$fetchPost('/userCard/getUserAllCard.action',{USER_ID:this.userId,PAGE_NO:1}).then(res=>{
          if(res.STATUS_CODE==1){
            this.cardMess=res;
            this.len=res.USERCARD.length;
            this.WX_config(res.TITEL,res.SHARE_IMG,res.REMARK);
            if(this.len==0){
              location.href='http://carnt.carnettong.com:8088/CARNT/jsp/card/card_Binding.jsp?card_phone='+phone;
            }
          }
        },err=>{
          console.log(err);
        })
    },
    goBack(){
      history.go(-1);
    },
    goMaintain(item){
      let obj=item;
      obj.publicUrl=this.cardMess.CAR_BRAND_URL;
      sessionStorage.setItem('cardMess',JSON.stringify(obj));
      this.$router.push('/cardMaintain/'+item.ID);
    },
    //获取微信的配置信息
    getConfig(){
      let timestamp,nonceStr,signature;
      let urls=iosAdroidWx().urls;
      let appid=iosAdroidWx().appid;
      this.$fetchPost(urls,{'url' : window.location.href},{emulateJSON:true})
      .then(res=>{
        var data = res;
        // timestamp = data.timestamp;
        // nonceStr = data.nonceStr;
        // signature = data.signature;
        timestamp=data.NOW_TIME;
        nonceStr=data.NONCESTR;
        signature=data.SKEY;
        wx.config({
            debug : false, // 开启调试模式,false调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId :appid, // 必填，公众号的唯一标识
            timestamp : timestamp, // 必填，生成签名的时间戳
            nonceStr : nonceStr, // 必填，生成签名的随机串
            signature : signature,// 必填，签名，见附录1
            jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage','chooseWXPay', 'showOptionMenu' ]
        });
      },err=>{

      });
    },
    // 微信参数配置
    WX_config (title,imgUrl,desc) {
      let linkUrl=location.href;
      wx.ready(function () { 
        // 分享给朋友
        wx.onMenuShareAppMessage({
          title: title,
          desc: desc,
          link: linkUrl,
          imgUrl: imgUrl,
          trigger: function (res) {
          },
          success: function (res) {
          },
          cancel: function (res) {
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        }); 

        //分享朋友圈
        wx.onMenuShareTimeline({
        title: title,
        desc: desc,
        link: linkUrl,
        imgUrl: imgUrl,
        trigger: function (res) {
        },
        success: function (res) {
        },
        cancel: function (res) {
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
        }); 
      });
    }
  },
  // 子组件
  components:{
    XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.yearCard{
	min-height: 100%;
  width: 7.5rem;
  background: #efeff4;
  .mask{
    position: fixed;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    background: rgba(0,0,0,.8);
    z-index: 9999;
  }
  .share{
    width: 7.5rem;
    height: 5.18rem;
    position: absolute;
    top: 7%;
    right: 0%;
    z-index: 10000;
    img{
      width: 4.48rem;
      height: 4.88rem;
      margin-left: 1.5rem;
    }
    .shareBtn{
      width: 4rem;
      height: 0.8rem;
      font-size: 0.3rem;
      line-height: 0.8rem;
      color: #fff;
      background: #ff0000;
      border-radius: 0.3rem;
      margin: 0.5rem auto;
    }
  }
  .buyBtn{
    width: 6.56rem;
    font-size: 0.32rem;
    color: #ec2121;
    height: 0.8rem;
    margin:0.3rem auto 0;
    line-height: 0.8rem;
    border-radius: 0.2rem;
    background: #ffe3e2;
    .borderFu(#ec2121,0.4rem);
    display: flex;
    align-items:center;
    justify-content:center;
    img{
      width: 0.32rem;
      height: 0.3rem;
      margin-right: 0.15rem;
    }
  }
  .wx{
    width: 0.44rem;
    height: 0.44rem;
  }
  .yearHead{
    position: fixed;
    width: 7.5rem;
    top: 0;
  }
  .ifrom{
  	width: 100%!important;
    position: fixed;
    padding-top: 0.8rem;
    height: 100%!important;
    left: 0;
    overflow: scroll;
  }
  .allCard{
    padding-top: 0.8rem;
    padding-bottom: 0.3rem;
    .cardItem{
      color: #fff;
      width: 6.56rem;
      margin: 0.3rem auto 0;
      height: 3.34rem;
      .cardHead{
        display: flex;
        justify-content:space-between;
        align-items:center;
        height: 0.95rem;
        line-height: 0.95rem;
        padding: 0 0.2rem;
        h1{
          font-size: 0.32rem;
          font-weight: bolder;
          span{
            font-size: 0.28rem;
            padding-left: 0.1rem;
          }
        }
        p{
          font-size: 0.26rem;
        }
      }
      .cardmain{
        display: flex;
        justify-content:space-between;
        align-items:center;
        height: 1.45rem;
        padding: 0 0.2rem;
        .maintainNum{
          font-size: 0.22rem;
          font-weight: bolder;
          display: flex;
          align-items:center;
          span{
            font-size: 0.48rem;
            margin-left: 0.1rem;
          }
        }
        .carMess{
          display: flex;
          img{
            width: 1rem;
            height: 1rem;
          }
          .messDetail{
            text-align: left;
            padding-left: 0.2rem;
            h2{
              font-size: 0.3rem;
              margin:0.05rem 0 0.1rem 0;
            }
            p{
              font-size: 0.2rem;
            }
          }
        }
      }
      .cardFooter{
        display: flex;
        height: 0.95rem;
        padding: 0 0.2rem;
        justify-content:space-between;
        align-items:center;
        .upMaintain{
          font-size: 0.25rem;
        }
        .btns{
          font-size: 0.25rem;
          width: 1.3rem;
          height: 0.62rem;
          line-height: 0.62rem;
          border-radius: 0.1rem;
        }
      }
    }
    .active1{
      background: url(../../assets/image/maintain/threeCard.png) no-repeat;
      background-size: 6.56rem 3.34rem;
      .cardFooter{
        .btns{
          background: #e83838;
          border:1px solid #c21414;
        }
      }
    }
    .active2{
      background: url(../../assets/image/maintain/twoCard.png) no-repeat;
      background-size: 6.56rem 3.34rem;
      .cardFooter{
        .btns{
          background: #5c84d6;
          border:1px solid #3a6acc;
        }
      }
    }
    .active3{
      background: url(../../assets/image/maintain/oneCard.png) no-repeat;
      background-size: 6.56rem 3.34rem;
      .cardFooter{
        .btns{
          background: #fb761d;
          border:1px solid #ee6407;
        }
      }
    }
  }
}
</style>